<template>
  <div class="home">
    <div class="swiper">
      <!-- <div class="Introduction">
        <el-card shadow="hover" class="person" style="background-color: #2d86e058">
          <el-card
            shadow="hover"
            class="touxiang"
            style="background-color: #2d86e058; border: radius 50%"
          >
            <el-row>
              <el-col :span="12">
                <el-avatar :size="100" :src="circleUrl"></el-avatar>
              </el-col>
            </el-row>
          </el-card>
        </el-card>
      </div> -->
      <div
        class="page1 page"
        :style="{
          transform: pageIndex <= 1 ? 'translate3d(0, 0, 0)' : 'translate3d(0, -100%, 0)',
          zIndex: 6
        }"
      >
        <PersonInfo></PersonInfo>
      </div>
      <div
        class="page2 page"
        :style="{
          transform: pageIndex <= 2 ? 'translate3d(0, 0, 0)' : 'translate3d(0, -100%, 0)',
          zIndex: 5
        }"
      >
        <PersonInfo2></PersonInfo2>
      </div>
      <div
        class="page3 page"
        :style="{
          transform: pageIndex <= 3 ? 'translate3d(0, 0, 0)' : 'translate3d(0, -100%, 0)',
          zIndex: 4
        }"
      >
        <PersonInfo3></PersonInfo3>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import PersonInfo from './PersonInfo.vue'
import PersonInfo2 from './PersonInfo2.vue'
import PersonInfo3 from './PersonInfo3.vue'

export default defineComponent({
  name: 'FullPage',
  setup() {
    let pageIndex = ref(1)
    //函数防抖
    const debounce = (func, wait) => {
      let timeout
      return function () {
        let context = this
        let args = arguments
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
          func.apply(context, args)
        }, wait)
      }
    }
    // 滚轮监听
    const methodB = (e) => {
      console.log(e.deltaY)
      if (e.deltaY > 0 && pageIndex.value == 3) {
        //  下一张  最后一张
        pageIndex.value = 1
      } else if (e.deltaY > 0 && pageIndex.value != 3) {
        //  下一张    不等于最后一张
        pageIndex.value++
      } else if (e.deltaY < 0 && pageIndex.value != 1) {
        //  上一张 不等于第一张
        pageIndex.value--
      } else if (e.deltaY < 0 && pageIndex.value == 1) {
        //  上一张 第一张
        pageIndex.value = 1
      } else {
        return
      }
      console.log(pageIndex.value)
    }
    onMounted(() => {
      //监听鼠标滚动事件
      window.addEventListener('mousewheel', debounce(methodB, 300), true) ||
        window.addEventListener('DOMMouseScroll', debounce(methodB, 300), false)
    })
    return {
      pageIndex
    }
  }
})
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  opacity: 1;
  .swiper {
    overflow: hidden;
    touch-action: none;
  }
  .Introduction {
    width: 100%;
    height: 100%;
    margin-bottom: 400px;
    position: absolute;
    .person {
      width: 200px;
      height: 400px;
      margin-left: 30px;
      margin: 0 30px;
      background: #2d86e058;
      --el-card-border-radius: 20px !important;
      box-shadow: 0 15px 15px #1935526e;
      align-items: center;
      border: none !important;
      position: absolute;
      float: left;
    }
  }

  .page {
    width: 100vw;
    height: 100vh;
    background: #905a5a;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    font-size: 50px;
    color: #fff;
    position: absolute;
    transition: transform 1s; // 变化时长
  }
  .page1 {
    background-image: '';
  }
  .page2 {
    background-color: rgb(34, 178, 68);
  }
  .page3 {
    background-color: rgb(34, 63, 178);
  }
  .page4 {
    background-color: rgb(178, 34, 154);
  }
  .page5 {
    background-color: rgb(156, 178, 34);
  }
}
</style>
